<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="admin/_admin_framt::head(Z博客后台)">
 <meta charset="utf-8" /> 
 <meta http-equiv="X-UA-Compatible" content="IE=edge"/> 
 <meta name="viewport" content="width=device-width, initial-scale=1"/> 
<title>博客后台</title>

<!--Bootstrap -->
 <link  href="../bootstrap/css/bootstrap.min.css" rel="stylesheet" /> 
 <link  href="../css/admin-side.css" rel="stylesheet" /> 
 <link  href="../css/admin-main.css" rel="stylesheet" /> 
</head>
  
<body>
	<!--左侧-->
	<div id="admin-side" th:replace="admin/_admin_framt::admin-side">
	</div>
	<!--左侧结束-->

	<!--右侧-->
	<div id="admin-main">
	<!--右侧-导航条-->
		<header class="admin-header navbar-inverse" th:replace="admin/_admin_framt::admin-main-nav">
		</header>
	<!--右侧-主体-->
		<ol class="breadcrumb" style="margin-bottom: 0px;">
		  <li><a href="admin-index.html">Home</a></li>
		  <li class="active">用户列表</li>
		</ol>
		<div id="table" class="admin-main-body container-fluid"  style="padding: 1rem;background: #fff;">
			<div class="admin-body-head" style="margin: 0px;">
				<form class="form-inline pull-left" >
				  <div class="form-group">
				    <input type="text" class="form-control"  placeholder="search" id="searchkey"/>
				  </div>
				  <a class="btn btn-default" v-on:click="search()">
				  	<span class="glyphicon glyphicon-search"></span>
				  </a>
				</form>
				<div class="pull-right">
					<!-- <button class="btn btn-warning btn-sm" >全选</button> -->
					<button class="btn btn-danger btn-sm" v-on:click="deleteUsers()">删除</button>
					<button class="btn btn-success btn-sm"  data-toggle="modal" data-target="#user_add">添加</button>
				</div>
				<div class="clearfix"></div>
			</div>
			<hr/>
			<table class="table">
				<thead>
					<th><input class="checkall" type="checkbox" v-on:click="checkall()"/></th>
					<th>用户名</th>
					<th>密码</th>
					<th>昵称</th>
					<th>邮箱</th>
					<th>创建日期</th>
					<th>操作</th>
				</thead>
				<tbody>
					<tr v-for="user in users.list">
						<td><input class="checkone" type="checkbox" v-bind:userid="user.userid"/></td>
						<td>{{ user.username }}</td>
						<td>{{ user.password }}</td>
						<td>{{ user.nickname }}</td>
						<td>{{ user.email }}</td>
						<td>{{ user.createtime }}</td>
						<td>
						<a class="btn btn-xs btn-info"  v-on:click="showUser(user.userid)" data-toggle="modal" data-target="#user_detail">查看</a>
						<a class="btn btn-xs btn-danger"  v-on:click="deleteUser(user.userid)">删除</a>	
						</td>
					</tr>
				</tbody>
			</table>
 			<nav aria-label="Page navigation">
			  <ul class="pagination">
			    <li>
			      <a id="up" class="btn" aria-label="Previous" v-on:click="userajax(users.pageNum-1,'')">
			        <span aria-hidden="true">上一页</span>
			      </a>
			    </li>
 			    <li class="active"><a>{{users.pageNum}}</a></li>
			    <li>
			      <a id="down" class="btn"  aria-label="Next" v-on:click="userajax(users.pageNum+1,'')">
			        <span aria-hidden="true">下一页</span>
			      </a>
			    </li>
			    <li class="disabled">
			        <a class="btn">总页数：{{users.pages}}</a>
			    </li>
			  </ul>
			</nav>
			
				<!-- 查看详情模态框 -->
				<!-- Modal -->
				<div class="modal fade" id="user_detail" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
				  <div class="modal-dialog modal-lg" role="document">
				    <div class="modal-content">
				      <div class="modal-body">
				      	<form class="form-horizontal">
						  <div class="form-group">
						    <label for="inputEmail3" class="col-sm-2 control-label">用户名</label>
						    <div class="col-sm-10">
						      <input type="username" class="form-control"   v-model:value="userdata.username"/>
						    </div>
						  </div>
						  <div class="form-group">
						    <label for="inputPassword3" class="col-sm-2 control-label">密码</label>
						    <div class="col-sm-10">
						      <input type="password" class="form-control"  v-model:value="userdata.password"/>
						    </div>
						  </div>
						  <div class="form-group">
						    <label for="inputPassword3" class="col-sm-2 control-label">昵称</label>
						    <div class="col-sm-10">
						      <input type="email" class="form-control"  v-model:value="userdata.nickname"/>
						    </div>
						  </div>
						  <div class="form-group">
						    <label for="inputPassword3" class="col-sm-2 control-label">邮箱</label>
						    <div class="col-sm-10">
						      <input type="email" class="form-control"  v-model:value="userdata.email"/>
						    </div>
						  </div>
						</form>
				      </div>
				      <div class="modal-footer">
				        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
				        <button type="button" class="btn btn-primary" v-on:click="updateUserInfo()">更新</button>
				      </div>
				    </div>
				  </div>
				</div>
				<!-- 添加模态框 -->
				<div class="modal fade" id="user_add" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
				  <div class="modal-dialog modal-lg" role="document">
				    <div class="modal-content">
				      <div class="modal-body">
						<form class="form-horizontal">
						  <div class="form-group">
						    <label for="inputEmail3" class="col-sm-2 control-label">用户名</label>
						    <div class="col-sm-10">
						      <input type="username" class="form-control"   v-model:value="username"/>
						    </div>
						  </div>
						  <div class="form-group">
						    <label for="inputPassword3" class="col-sm-2 control-label">密码</label>
						    <div class="col-sm-10">
						      <input type="password" class="form-control"  v-model:value="password"/>
						    </div>
						  </div>
						  <div class="form-group">
						    <label for="inputPassword3" class="col-sm-2 control-label">昵称</label>
						    <div class="col-sm-10">
						      <input type="email" class="form-control"  v-model:value="nickname"/>
						    </div>
						  </div>
						  <div class="form-group">
						    <label for="inputPassword3" class="col-sm-2 control-label">邮箱</label>
						    <div class="col-sm-10">
						      <input type="email" class="form-control"  v-model:value="email"/>
						    </div>
						  </div>
						</form>
				      </div>
				      <div class="modal-footer">
				        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
				        <button type="button" class="btn btn-primary" v-on:click="addUser()">保存</button>
				      </div>
				    </div>
				  </div>
				</div>
		</div>

	<!--右侧-底部-->
	</div>
	<!--右侧结束-->


  <!-- js -->
<div th:replace="admin/_admin_framt::admin-js">
<!--     jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script th:src="@{../jquery/jquery-2.1.1.min.js}"></script>
<!--     加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script th:src="@{../bootstrap/js/bootstrap.min.js}"></script>  
<script th:src="@{../js/admin.js}"></script>  
</div>
</body>
  
<script type="text/javascript">
var url = "http://localhost:8888/user";
 
//通过vue.js 把数据和对应的视图关联起来
new Vue({
      el: '#table',
      data: {
    	//用户列表
        users: [],
        //用户详情
        userdata:{},
        username:"",
        password:"",
        nickname:"",
        email:""
      },
	mounted:function(){ //mounted　表示这个 Vue 对象加载成功了
		var seft=this;
			$.ajax({
				url:url,
				type:'get',
				data:{start:1},
				//async: false,//同步
				success : function(data){
					seft.users=data.data;
					if(seft.users.pageNum>1){
						$("#up").removeClass("disabled");
					}else{
						$("#up").addClass("disabled");
					}
 					if(seft.users.pageNum>=seft.users.pages){
						$("#down").addClass("disabled");
					}else{
						$("#down").removeClass("disabled");
					} 
				},
				fail:function(){
					console.log("获取users请求失败:"+err);
				}
			});
		},
	methods:{//所有方法必须在method里创建
	  userajax:function(startnum,key){
		  var seft=this;
		  $.ajax({
				url:url,
				type:'get',
				data:{start:startnum,searchkey:key},
				//async: false,//同步
				success : function(data){
					seft.users=data.data;
					if(seft.users.pageNum>1){
						$("#up").removeClass("disabled");
					}else{
						$("#up").addClass("disabled");
					}
 					if(seft.users.pageNum>=seft.users.pages){
						$("#down").addClass("disabled");
					}else{
						$("#down").removeClass("disabled");
					} 
				},
				fail:function(){
					console.log("获取users请求失败:"+err);
				}
			});
	  },
	  search:function(){
		  var key=$('#searchkey').val();
		  this.userajax(1,key);
	  },
	  checkall:function(){
		  var checkStatu=$('.checkall')[0].checked;
		  $(".checkone").prop("checked",checkStatu);
	  },
	  deleteUsers:function(){
		  var seft=this;
		  var userids=new Array();
			//定位到单选框，遍历所有该标签的单选框,加上：checked属性表示只遍历选择过的单选框
			$(".checkone:checked").each(function(){
				//获取每个单选框里的adminid值，
				// this表示当前遍历到的对象 ，但this.adminId拿不到值，原因是：this作为DOM对象无法读取HTML标签本身没有的属性
				// adminid是自己定义的对象，将this转换为jQuery对象调用attr()函数就能够拿到值
				var id=$(this).attr("userid");
				//使用数组push方法将值放入数组
				userids.push(id);
			});
			var jsonlist=JSON.stringify(userids);
			if(jsonlist!=null){
				$.ajax({
					url:url,
					type:'delete',
					data:jsonlist, 
					contentType:"application/json", 
					//async: false,//同步
					dateType:"json",
					success : function(ret){
						alert("删除成功：");
						seft.userajax(1,"");
					},
					fail:function(){
						alert("请求错误");
						console.log("请求错误:");
					}
				}); 	
			}
	  	},
	  	deleteUser:function(id){
			 	var seft=this;
			  	var userids=new Array();
			  	userids.push(id);
				var jsonlist=JSON.stringify(userids);
				if(jsonlist!=null){
					$.ajax({
						url:url,
						type:'delete',
						data:jsonlist, 
						contentType:"application/json", 
						//async: false,//同步
						dateType:"json",
						success : function(ret){
							alert("删除成功：");
							seft.userajax(1,"");
						},
						fail:function(){
							console.log("请求错误:");
						}
					}); 	
				}
		  	},
	  //查看详情
	  showUser:function(id){
			var seft=this;
			$.ajax({
				url:url+"/"+id,
				type:'get',  
				//async: false,//同步
				//dateType:"json",
				success : function(ret){
					seft.userdata=ret.data;
				},
				fail:function(){
					console.log("请求错误:");
				}
			}); 
	 	},
	 //更新
	 updateUserInfo:function(){
	 		var seft=this;
	        var user=JSON.stringify(seft.userdata);
	        $.ajax({
				url:url,
				type:'put',  
				data:user,
				contentType:"application/json",
				dateType:"json",//返回类
				success : function(ret){
					if(ret.result=="success")
					alert("更新成功");
					else {
						alert("更新失败");
						console.log(ret.message);
					}
				},
				fail:function(){
					console.log("请求错误:");
				}
			}); 
	 	},
		 //添加
		 addUser:function(){
		 		var seft=this;
	 			var user={
	 					username:seft.username,
	 					password:seft.password,
	 					email:seft.email,
	 					nickname:seft.nickname,
	 					createtime:new Date(),
	 					usertype:0
	 			}
		        $.ajax({
					url:url,
					type:'post',  
					data:JSON.stringify(user),
					contentType:"application/json",
					dateType:"json",//返回类
					success : function(ret){
						if(ret.result=="success"){
							alert("添加成功");	
							seft.userajax(1,"");
						}else {
							alert("添加失败："+ret.message);
							console.log(ret.message);
						}
					},
					fail:function(){
						console.log("请求错误:");
					}
				}); 	
	 		}
     }
    })
    
/*<![CDATA[*/
//调整内容长度方法
/*]]>*/
</script>
  
</html>